<!-- 第一小部分的使用 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>simple shopping cart</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <style>
        table{
        border: 1px;
        border-collapse: collapse;
        border-spacing: 0;
        }
        th,td{
        padding: 8px 16px;
        border: ipx solid #e9e9e9;
        text-align: left;
        }
        th{
        background-color: #f7f7f7;
        color: #5c6b77;
        font-weight: 600;
        }
    </style>
</head>
<body>
    <div id="app">
        搜索书本名含有 <input type="text" v-model="keyWord" />
        <button type="reset" @click="clear">清空输入</button>
        <table>
            <thead>
              <th>&nbsp;</th>
              <th>书籍名称</th>
              <th>出版日期</th>
              <th>价格</th>
              <th>购买数量</th>
              <th>操作</th>
            </thead>
            <tbody>
              <!-- <tr v-for="(book, index) in books" :key="index"> -->
            <tr v-for="(book, index) in search()" :key="index" >
                <td>{{index}}</td>
                <td>{{book.name}}</td>
                <td>{{book.beginDate}}</td>
                <td>{{"￥"+ book.price}}</td>
                <td>
                  <button @click="minus(index)" :disabled="book.quantity<=1" >-</button>
                  {{book.quantity}}
                  <button @click="add(index)">+</button>
                </td>
                <td><button @click="remove(index)">移除</button></td>
              </tr>
            </tbody>
          </table>

          <h3>增加新书</h3>
          <form action="">
              书籍名称 <input type="text" v-model="name" />
              出版日期 <input type="text"  v-model="beginDate"/>
              价格<input type="number" v-model="price">
              <button type="submit" v-on:click.prevent="addBook">添加</button>
          </form>

          <h3>总价：{{"￥"+ totalPrice }}</h3>
    </div> 
</body>
<script>
    var app= new Vue({
        el:"#app",
        data:{ 
            keyWord:"",
            name:"",
            beginDate:"",
            price:"",
            books: [{
                name: "《算法导论》",
                beginDate: "2006-9",
                price: 85.00,
                quantity: 1
            },
            {
                name: "《UNIX编程艺术》",
                beginDate: "2006-2",
                price: 59.00,
                quantity: 1
            },
            {
                name: "《编程大全》",
                beginDate: "2008-10",
                price: 39.00,
                quantity: 1
            },
            {
                name: "《代码大全》",
                beginDate: "2006-3",
                price: 128.00,
                quantity: 1
            },
            ] 
        },
        computed:{
            // totalPrice(){
            //     let sum=0;
            //     this.books.map((item) => {
            //         sum+=item.price*item.count
            //     });
            //     return sum;
            // }
            totalPrice(){ 
                return this.books.reduce((prev, current) => {
                    return  prev + current.price * current.quantity
            }, 0)
            }
        },
        methods:{
            add(index){
                 this.books[index].quantity++   
            },
            minus(index){
                this.books[index].quantity--   
            },
            remove(index){
                ///console.log("before" + this.books.map(item=>item.name))
               this.books.splice(index,1)
               //console.log("after" + this.books.map(item=>item.name))
            },
            addBook(){
                let newbook={
                    name:this.name,
                    beginDate:this.beginDate,
                    //price:Number.parseFloat(this.price).toFixed(2),
                    price:Number.parseInt(this.price),
                    quantity: 1
                }
                this.books.push(newbook)
                console.log(newbook)
                this.name=""
                this.beginDate=""
                this.price=""
            },
            search() {
                return this.books.filter(item => {
                return item.name.includes(this.keyWord) != false;
                }); 
            },
            clear(){
                this.keyWord=""
            }  
        }
    })
</script>
</html>

<!-- 额外练习
展示品牌列表
GET 接口地址 http://www.liulongbin.top:3005/api/getprodlist

添加品牌数据
POST 接口地址 http://www.liulongbin.top:3005/api/addproduct

删除品牌数据
GET 接口地址 http://www.liulongbin.top:3005/api/delproduct/:id

 -->